<script setup>
//接收user传过来的数据
import getDate from '@/utils/dateChange.js'
import {ref, watch} from 'vue'
import useArticleStore from '@/store/article/index.js'
import router from '@/router/index.js'

const articleStore = useArticleStore()

//定义user数据接收器
defineProps({
  newsList: {
    type: Array,
    default: () => []
  }
})

//定义分页器
const page = ref(1)
const size = ref(10)

//size大小切换
const handleSizeChange = () => {
  articleStore.getArticleList(page.value, size.value)
}

//当前页切换
const handleCurrentChange = () => {
  articleStore.getArticleList(page.value, size.value)
}

//删除用户
const deleteBtn = async (id) => {
  await articleStore.removeAction(id)
  await articleStore.getArticleList(page.value, size.value)
}

// //批量删除用户
const ids = ref()
const handleSelectionChange = (userIds) => {
  ids.value = userIds.map((item) => item.userId)
}
const deleteBatchBtn = async () => {
  await loginStore.removeBatchUserByUserIdsAction(ids)
  loginStore.getUserListInfoAction(page.value, size.value)
}

//批量按钮禁用
const isDisabled = ref(true)
watch(ids, (newValue, oldValue) => {
  if (newValue.length > 0) {
    isDisabled.value = false
  } else {
    isDisabled.value = true
  }
})

//查看
const detailBtn = async (id) => {
  await router.push({
    path: '/main/article/detail',
    query: {
      id: id
    }
  })
}
</script>

<template>
  <div class="content">
    <div class="header">
      <el-popconfirm @confirm="deleteBatchBtn" title="确定要批量删除吗?">
        <template #reference>
          <el-button :disabled="isDisabled" type="danger" plain>
            <el-icon>
              <Delete/>
            </el-icon>
            <span>批量删除</span>
          </el-button>
        </template>
      </el-popconfirm>
    </div>

    <!--    表格内容-->
    <el-table
        @selection-change="handleSelectionChange"
        ref="tableRef"
        :data="newsList"
        style="width: 100%;"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column property="id" label="文章id" width="70"/>
      <el-table-column
          align="left"
          property="title"
          label="文章名称"
          width="200"
      >
        <template #default="scope">
          <div class="ellipsis">{{ scope.row.title }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" property="images" label="图片" width="200px">
        <template #default="scope">
          <img style="width: 100%" height="150px" :src="scope.row.images"/>
        </template>
      </el-table-column>
      <el-table-column align="center" property="name" label="作者" width="150"/>
      <el-table-column align="center" property="createTime" label="发布时间" width="165">
        <template #default="scope">
          {{ getDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="170">
        <template #default="scope">
          <el-button v-if="scope.row.status===0" type="primary" text="primary" @click="detailBtn(scope.row.id)">待审核
          </el-button>
          <el-button v-else-if="scope.row.status===1" type="primary" text="">通过</el-button>
          <el-button v-else-if="scope.row.status===2" type="primary" text="primary">
            拒绝
          </el-button>
          <el-popconfirm @confirm="deleteBtn(scope.row.id)" title="确定要删除吗?">
            <template #reference>
              <el-button type="danger" text="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器      -->
    <el-pagination
        v-model:current-page="page"
        v-model:page-size="size"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="articleStore.articleList.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped lang="less">
.content {
  padding: 0 15px 0 15px;

  .header {
    margin-bottom: 10px;
  }

  .el-pagination {
    margin-top: 20px;
  }
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
